<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息 - 企业端</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { background:#f9f9f9; height:100vh; }
        .app-container { max-width:390px; height:100%; margin:0 auto; background:#fff; padding-bottom:80px; }
        .chat-item { padding:15px; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; cursor:pointer; }
        .chat-avatar { width:50px; height:50px; border-radius:50%; object-fit:cover; margin-right:15px; position:relative; }
        .chat-name { font-weight:600; font-size:16px; }
        .chat-time { font-size:12px; color:#999; }
        .chat-message { font-size:14px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
        .bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:390px; display:flex; justify-content:space-around; padding:12px 0; background:#fff; border-top:1px solid #eee; }
        .bottom-nav a { display:flex; flex-direction:column; align-items:center; color:#666; font-size:12px; text-decoration:none; }
        .bottom-nav a i { font-size:20px; margin-bottom:4px; }
        .bottom-nav a.active { color:#1677ff; }
    </style>
</head>
<body>
    <div class="app-container">
        <div class="py-4">
            <div class="flex justify-between items-center px-4 mb-4">
                <h1 class="text-xl font-bold">消息</h1>
                <button class="p-2"><i class="fas fa-ellipsis-h text-gray-600"></i></button>
            </div>
            <div class="chat-item" onclick="window.location.href='chat.html'">
                <img class="chat-avatar" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=100&h=100&q=80" />
                <div class="flex-1">
                    <div class="flex justify-between items-center mb-1"><span class="chat-name">张伟</span><span class="chat-time">10:30</span></div>
                    <div class="chat-message">您好，我对贵公司的前端开发职位很感兴趣</div>
                </div>
            </div>
            <div class="chat-item" onclick="window.location.href='chat.html'">
                <img class="chat-avatar" src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?auto=format&fit=crop&w=100&h=100&q=80" />
                <div class="flex-1">
                    <div class="flex justify-between items-center mb-1"><span class="chat-name">李梅</span><span class="chat-time">昨天</span></div>
                    <div class="chat-message">我想了解一下职位JD的详细要求</div>
                </div>
            </div>
        </div>
        <div class="bottom-nav">
            <a href="card-matching-company.html"><i class="fas fa-home"></i><span>首页</span></a>
            <a href="chat-list-company.html" class="active"><i class="fas fa-comment"></i><span>消息</span></a>
            <a href="my.html"><i class="fas fa-user"></i><span>我的</span></a>
        </div>
    </div>
</body>
</html> 